﻿<html>
	<script src="multiply-matrices.js"></script>
	<script src="conversions.js"></script>
	<script>
	// make 9 steps in sRGB, compare to 9 steps in D65-adapted lab
	// odd number of steps so we have an exact 50%

	for (var i =0; i <9; i++) {
		console.log(100 * i / 8);
	}
	for (var i =0; i <9; i++) {
		var lab = [100 * i / 8, 0, 0];
		// console.log(lab);
		console.log(i);
		var xyz = Lab_to_XYZ(lab);
		// okay, bradford
		var xyz2 = D50_to_D65(xyz);
		var linrgb = XYZ_to_lin_sRGB(xyz2);
		// console.log(linrgb);
		var rgb = gam_sRGB(linrgb);
		console.log(rgb);
	}
	</script>
	<style>
		body {background-color: rgb(46.6346021727084%, 46.6346021727084%, 46.6346021727084%);  padding: 20px;}
		#rgb div, #lab div {width:60px; height: 60px; display: inline-block; padding:10px; margin: 10px;  }
		h2 {color: rgb(243, 235, 166);}
	</style>
	<h2>Equal steps in sRGB</h2>
	<div id="rgb">
		<div style="background-color:rgb(0,0,0)"> </div>
		<div style="background-color:rgb(12.5%, 12.5%, 12.5%)"> </div>
		<div style="background-color:rgb(25%, 25%, 25%)"> </div>
		<div style="background-color:rgb(37.5%, 37.5%, 37.5%)"> </div>
		<div style="background-color:rgb(50%, 50%, 50%)"> </div>
		<div style="background-color:rgb(62.5%, 62.5%, 62.5%)"> </div>
		<div style="background-color:rgb(75%, 75%, 75%)"> </div>
		<div style="background-color:rgb(87.5%, 87.5%, 87.5%)"> </div>
		<div style="background-color:rgb(100%, 100%, 100%)"> </div>
	</div>
	<h2>Equal steps in Lab</h2>
	<div id="lab">
		<div style="background-color:rgb(0,0,0)"> </div>
		<div style="background-color:rgb(12.749552497781125%, 12.749552497781125%, 12.749552497781125%)"> </div>
		<div style="background-color:rgb(23.252523386167795%, 23.252523386167795%, 23.252523386167795%)"> </div>
		<div style="background-color:rgb(34.59944594333101%, 34.59944594333101%, 34.59944594333101%)"> </div>
		<div style="background-color:rgb(46.6346021727084%, 46.6346021727084%, 46.6346021727084%)"> </div>
		<div style="background-color:rgb(59.2564772904724%, 59.2564772904724%, 59.2564772904724%)"> </div>
		<div style="background-color:rgb(72.39290209364759%, 72.39290209364759%, 72.39290209364759%)"> </div>
		<div style="background-color:rgb(85.98956900584421%, 85.98956900584421%, 85.98956900584421%)"> </div>
		<div style="background-color:rgb(100%, 100%, 100%)"> </div>
	</div>
</html>